import { ElButton, ElCheckbox } from "element-plus";
import { defineComponent } from "vue";
import { showSlot } from "~/src/utils/hooks";
import Style1080 from './1080.module.scss';
import Stylevedio from './vediotop.module.scss';
import { KEEP_VIDEO_TOP } from '~/src/config';

interface ItemInfo {
    id: string;
    title: string;
    money: string;
}

export default defineComponent({
    props: {
        id: { type: String, default: "" },
        title: { type: String, default: "-" },
        jzks: { type: String, default: "-" },
        jzsj: { type: String, default: "-" },
        money: { type: String, default: "-" },
        checked: { type: Boolean, default: false }, // 控制复选框状态
        totalAmount: { type: String, default: "-" }, // 总金额
        checkedAll: { type: Boolean, default: false }, // 全选状态
        checkedCount: { type: Number, default: 0 }, // 已选数量
        showCheckbox: {type: Boolean, default: true },// 默认显示复选框
        fytype: { type: String, default: "" }, // 住院费用查询 类型 rq lx
    },
    emits: {
        handleClick: (id: string) => true,
        checkAllChange: (checked: boolean) => true
    },
    setup(props, { emit, slots }) {
        const Style = KEEP_VIDEO_TOP ? Stylevedio : Style1080;

        const handleItemClick = (id: string) => {
            emit("handleClick", id);
        };

        const handleAllClick = (checked: boolean) => {
            emit("checkAllChange", checked);
        };

        return () => (
            <div class={slots["btn"] ? Style.outer2 : Style.outer}>
                {props.id ? (
                    <div class={[Style.child, Style.content, slots.btn ? Style.outer_height : ""]}>
                        {/*门诊缴费content*/}
                        {props.showCheckbox && (
                            <ElCheckbox
                                size="large"
                                style={{ marginLeft: "32px", flex: "1" }}
                                checked={props.checked}
                                onChange={() => handleItemClick(props.id)}
                            >
                              <span class={[Style.ztStyle, slots.btn ? Style.zt_color : ""]}>
                                {props.title}
                              </span>
                            </ElCheckbox>
                        )}
                        {/*住院费用清单查询content*/}
                        {!props.showCheckbox && (
                            <span class={[Style.ztStyle, slots.btn ? Style.zt_color : ""]} style={{ marginLeft: "32px", flex: "1" }}>
                              {props.fytype === "rq" ? props.jzsj : props.title}
                            </span>
                        )}
                        {slots.btn1 ?
                            // 住院费用清单content
                            <div>{showSlot(slots, "btn1")}</div>
                            :
                            // 门诊缴费content
                            <div style={{color: "#F20C27", marginRight: "32px"}} class={Style.ztStyle}>
                                ￥ {props.money}
                            </div>
                        }
                    </div>
                ) : (

                    <div class={[Style.child, Style.content, slots.btn ? Style.outer_height : ""]}>
                    {props.showCheckbox && (
                            <ElCheckbox
                                size="large"
                                style={{ marginLeft: "32px", flex: "1" }}
                                checked={props.checkedAll}
                                onChange={(checked) => handleAllClick(checked as boolean)}
                            >
                              <span class={[Style.ztStyle, slots.btn ? Style.zt_color : ""]}>
                                全部支付 (共{props.checkedCount}条单据)
                              </span>
                            </ElCheckbox>
                        )}
                        {!props.showCheckbox && (
                            <span class={[Style.ztStyle, slots.btn ? Style.zt_color : ""]}
                                  style={{ marginLeft: "32px", flex: "1" }}>
                              全部支付 (共{props.checkedCount}条单据)
                            </span>
                        )}
                        <div style={{ color: "#F20C27", marginRight: "32px" }} class={Style.ztStyle}>
                            合计：￥{props.totalAmount}
                        </div>
                    </div>
                )}
                {slots.btn ? (
                    <div class={[Style.child, Style.content]}>
                        {showSlot(slots, "btn")}
                    </div>
                ) : (
                    <>
                        {KEEP_VIDEO_TOP ? "" : (
                            <>
                                <div class={Style.divider}></div>
                                <div class={[Style.child, Style.content, Style.ztStyle2]}>
                                    <div style={{ marginLeft: "32px", flex: "1" }}>
                                        就诊科室：<span>{props.jzks}</span>
                                    </div>
                                    {/*<div style={{ marginRight: "32px" }} >*/}
                                    {/*    就诊时间：<span>{props.jzsj}</span>*/}
                                    {/*</div>*/}
                                </div>
                            </>
                        )}
                    </>
                )}
            </div>
        );
    }
})
